<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet"
	type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet"
	type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>编辑文章</title>
</head>
<body>
	<div class="pd-20">
		<form action="<%=basePath%>backstage/editor" method="POST"
			class="form form-horizontal" id="form-u_article-add"
			onsubmit="before_submit()">

			<input type="hidden" id="article" name="article_id"
				value='${article.id}' />

			<div class="row cl">
				<label class="form-label col-2">分类：</label>
				<div class="col-8" style="color: #ccc;">当前所属分类</div>
			</div>

			<c:forEach items="${selected_cates}" var="cate">
				<div class="row cl cat_selected_row" id="row_cate_${cate.id}">
					<label class="form-label col-2"></label>
					<div class="col-8">
						<div class="col-4">
							<select name="cate_id" id="selected_cate_${cate.id}"
								class="select">
								<option value="${cate.id}" selected="selected">${cate.cate_full_name}</option>
							</select>
						</div>
					</div>
					<button onClick="cat_selected_remove(${cate.id});"
						class="btn btn-warning radius fl" type="button">删除</button>
				</div>
			</c:forEach>

			<div class="row cl">
				<label class="form-label col-2"></label>
				<div id="cat_select_div" class="cat_select_div form-label col-8">

					<div class="cat_select_div_1" style="margin-bottom: 35px;">
						<div class="formControls col-3">
							<select class="select" name="first_cate_id" onchange="first_cate_change(this)">
								<option <c:if test="${u_cate.parent_id==-1}">selected</c:if>
									value="0">选择一级分类</option>
								<c:forEach items="${first_cates}" var="cate">
									<option value="${cate.id}"
										<c:if test="${cate.id==u_cate.parent_id}">selected</c:if>>${cate.cate_full_name}</option>
								</c:forEach>
							</select>
						</div>
						<label class="form-label col-1">二级：</label>
						<div class="formControls col-3">
							<select class="second_cates" onchange="second_cate_change(this)">
								<option <c:if test="${u_cate.parent_id==-1}">selected</c:if>
									value="0">选择二级分类</option>
								<c:forEach items="${second_cates}" var="cate">
									<option value="${cate.id}"
										<c:if test="${cate.id==u_cate.parent_id}">selected</c:if>>${cate.cate_full_name}</option>
								</c:forEach>
							</select>
						</div>
						<label class="form-label col-1">三级：</label>
						<div class="formControls col-4">
							<select name="cate_id" class="third_cates">
								<option <c:if test="${u_cate.parent_id==-1}">selected</c:if>
									value="0">选择三级分类</option>
								<c:forEach items="${third_cates}" var="cate">
									<option value="${cate.id}"
										<c:if test="${cate.id==u_cate.parent_id}">selected</c:if>>${cate.cate_full_name}</option>
								</c:forEach>
							</select>
						</div>

					</div>
				</div>
				<button onClick="cat_select_add();" class="btn btn-primary radius"
					type="button">添加</button>
			</div>

			<div class="row cl">
				<label class="form-label col-2">标签：</label>
				<div class="formControls col-4">
					<input type="text" value="${article.label}" class="input-text"
						name="label" datatype="*" nullmsg="不能为空">
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-2"></label>
				<div class="formControls col-2">
					<select name="first_labels" onchange="first_label_change(this)"
						class="select">
						<option value="-1">选择标签分类</option>
						<c:forEach items="${first_labels}" var="label">
							<option value="${label.label_id}">${label.label_name}</option>
						</c:forEach>
					</select>
				</div>
				<div class="formControls col-4" id="labels2"></div>

				<div id="insert3" class="formControls col-5"></div>
			</div>

			<div class="row cl">
				<label class="form-label col-2">文章题目：</label>
				<div class="formControls col-6">
					<input type="text" value="${article.title}" required
						class="input-text" placeholder="" id="" name="title" datatype="*"
						nullmsg="不能为空">
				</div>
			</div>


			<div class="row cl">
				<label class="form-label col-2">适应年龄：</label>
				<div class="formControls col-8">年龄上限:
					<input type="text" required class="input-text" style="width:100px;" placeholder="" id=""
						value="${article.apl_up}" name="apl_up" datatype="*" nullmsg="不能为空">（天）
						&nbsp;&nbsp;年龄下限:
					<input type="text" required class="input-text" style="width:100px;" placeholder="" id=""
						value="${article.apl_down}" name="apl_down" datatype="*" nullmsg="不能为空">（天）
				</div>
			</div>

			<!--已有图片显示 和 获取图片地址-->
			<div class="row cl">
				<label class="form-label col-2"></label>
				<div class="formControls col-10">
					<c:if test="${!empty article.header_img }">
						<img src="../../<%=imagePath%>${article.header_img}" height="50"
							border="0" />
					</c:if>
				</div>
			</div>
			<input type="hidden" id="header_img" name="header_img"
				value="${article.header_img}" />

			<div class="row cl">
				<label class="form-label col-2">缩略图：</label>
				<div class="formControls col-10">
					<div class="uploader-thum-container">
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker">选择图片</div>
						<button id="btn-star" type="button"
							class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
					</div>

				</div>
			</div>

			<!--已有图片显示 和 获取图片地址-->
			<div class="row cl">
				<label class="form-label col-2"></label>
				<div class="formControls col-10">
					<c:if test="${!empty article.img1 }">
						<img src="../../<%=imagePath%>${article.img1}" height="50" border="0" />
					</c:if>
				</div>
			</div>
			<input type="hidden" id="img1" name="img1" value="${article.img1}" />

			<div class="row cl">
				<label class="form-label col-2">图片：</label>
				<div class="formControls col-10">
					<div class="uploader-thum-container">
						<div id="fileList2" class="uploader-list"></div>
						<div id="filePicker2">选择图片</div>
						<button id="btn-star2" type="button"
							class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
					</div>

				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-2">描述：</label>
				<div class="formControls col-8">
					<input type="text" required class="input-text" placeholder="" id=""
						value="${article.description}" name="description" datatype="*"
						nullmsg="不能为空">
				</div>
			</div>
			<div class="row cl">
				<!--提交前获取编辑器内容-->
				<input type="hidden" id="content" name="content"
					value='${article.content}'> <label class="form-label col-2">内容：</label>
				<div class="formControls col-8">
					<script id="editor" type="text/plain"> </script>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-2">文章地址：</label>
				<div class="formControls col-8">
					<%=basePath%>backstage/articleDetail?article_id=${article.id}
				</div>
			</div>
			<div class="row cl">
				<div class="col-10 col-offset-2">
					<button onClick="u_article_save_submit();"
						class="btn btn-primary radius" type="submit">保存并提交</button>
					<button onClick="layer_close();" class="btn btn-default radius"
						type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
				</div>
			</div>
		</form>
	</div>
	</div>
	<script type="text/javascript" src="<%=basePath%>backstage/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>backstage/lib/layer/2.1/layer.js"></script>
	<script type="text/javascript" src="<%=basePath%>backstage/lib/icheck/jquery.icheck.min.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>backstage/lib/Validform/5.3.2/Validform.min.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>backstage/lib/webuploader/0.1.5/webuploader.min.js"></script>

	<script type="text/javascript" charset="utf-8"
		src="<%=basePath%>backstage/lib/ueditor/1.4.3/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="<%=basePath%>backstage/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
	<script type="text/javascript" charset="utf-8"
		src="<%=basePath%>backstage/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
		
	<script type="text/javascript" src="<%=basePath%>backstage/js/H-ui.js"></script>
	<script type="text/javascript" src="<%=basePath%>backstage/js/H-ui.admin.js"></script>

	<script type="text/javascript">

var child_labels;

function u_article_save_submit(){
	$("#form-u_article-add").Validform({
		tiptype:2,
		ajaxPost:true,
		callback:function(form){
			var index = parent.layer.getFrameIndex(window.name);
			if (index){//关闭弹出层
				parent.$('.btn-refresh').click(); 
				parent.layer.close(index);
			}else{//单独的页面
				location.href = "<%=basePath%>/backstage/webarticlelist"; 
			}
		}
	});
}

function cat_select_add(){
	var cat_selects = $(".cat_select_div_1").html();
	$(".cat_select_div").append("<div class='cat_select_div_row' >"+cat_selects+"</div>");
}

function cat_selected_remove(id){
	var cat_row = $("#row_cate_"+id);
	cat_row.remove();
}

//初始化Ueditor
$(function(){
	var ue = UE.getEditor('editor');
	
	ue.ready(function(){
		var art_content = $("#content").val();
		ue.setContent(art_content);    
	})
});

function before_submit(){
	//获取内容
	var ue = UE.getEditor('editor');
	var editor_content = ue.getContent();
	$("#content").val(editor_content);
	//
	return true;
}

// 一级分类选择
function first_cate_change(the_select){
	var select_id = the_select.value;
	if (select_id){
		$.ajax({
			type:"GET",
			url:"<%=basePath%>/backstage/cate_list_by_parent_id",
			dataType: "json",
			data : {id:select_id},
			success : function(msg){
				var cates = msg.datas;
				var options = "<option value='-1'>--选择二级分类--</option>";
			
				for (var i = 0; i < cates.length; i++){
					var aOption = "<option value='"+ cates[i].id+"' >"+ cates[i].cate_name+"</option>"
					options += aOption; 
				}
				var cur_div = $("#cat_select_div").find(".second_cates").last();
				cur_div.html(options);
			}
		});
	}
	///if
}


// 二級分类选择响应
function second_cate_change(the_select){
	var select_id = the_select.value;
	if (select_id){
		$.ajax({
			type:"GET",
			url:"<%=basePath%>/backstage/cate_list_by_parent_id",
			dataType: "json",
			data : {id:select_id},
			success : function(msg){
				var cates = msg.datas;
				var options = "<option value='-1'>--选择三级分类--</option>";
				for (var i = 0; i < cates.length; i++){
					var aOption = "<option value='"+ cates[i].id+"' >"+ cates[i].cate_name+"</option>"
					options += aOption; 
				}
				var cur_div = $("#cat_select_div").find(".third_cates").last();
				cur_div.html(options);
			}
		});
	}
	///if
}
	
$(function(){
	//图片上传
	$list = $("#fileList"),
	$btn = $("#btn-star"),
	state = "pending",
	uploader;

	var uploader = WebUploader.create({
		auto: true,
		swf: 'lib/webuploader/0.1.5/Uploader.swf',
		server: '<%=basePath%>backstage/pic-upload',
		pick: '#filePicker',
		resize: false,
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		}
	});
	uploader.on( 'fileQueued', function( file ) {
		var $li = $(
			'<div id="' + file.id + '" class="item">' +
				'<div class="pic-box"><img></div>'+
				'<div class="info">' + file.name + '</div>' +
				'<p class="state">等待上传...</p>'+
			'</div>'
		),
		$img = $li.find('img');
		$list.append( $li );
	});	
	// 文件上传成功
	uploader.on( 'uploadSuccess', function( file, response ) {
		$( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
		// 获取上传地址
		$("#header_img").val(response.datas);
	});	
	// 文件上传失败
	uploader.on( 'uploadError', function( file ) {
		$( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");

	});
	// 完成上传完了
	uploader.on( 'uploadComplete', function( file ) {
		$( '#'+file.id ).find('.progress-box').fadeOut();
	});
	uploader.on('all', function (type) {
        if (type === 'startUpload') {
            state = 'uploading';
        } else if (type === 'stopUpload') {
            state = 'paused';
        } else if (type === 'uploadFinished') {
            state = 'done';
        }
        if (state === 'uploading') {
            $btn.text('暂停上传');
        } else {
            $btn.text('开始上传');
        }
    });

    $btn.on('click', function () {
        if (state === 'uploading') {
            uploader.stop();
        } else {
            uploader.upload();
        }
    });

});


	
$(function(){
	//图片上传
	$list2 = $("#fileList2"),
	$btn2 = $("#btn-star2"),
	state = "pending",
	uploader2;

	var uploader2 = WebUploader.create({
		auto: true,
		swf: 'lib/webuploader/0.1.5/Uploader.swf',
		server: '<%=basePath%>backstage/pic-upload',
		pick: '#filePicker2',
		resize: false,
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		}
	});
	uploader2.on( 'fileQueued', function( file ) {
		var $li = $(
			'<div id="' + file.id + '" class="item">' +
				'<div class="pic-box"><img></div>'+
				'<div class="info">' + file.name + '</div>' +
				'<p class="state">等待上传...</p>'+
			'</div>'
		),
		$img = $li.find('img');
		$list2.append( $li );
	});	
	// 文件上传成功
	uploader2.on( 'uploadSuccess', function( file, response ) {
		$( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
		// 获取上传地址
		$("#img1").val(response.datas);
	});	
	// 文件上传失败
	uploader2.on( 'uploadError', function( file ) {
		$( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");

	});
	// 完成上传完了
	uploader2.on( 'uploadComplete', function( file ) {
		$( '#'+file.id ).find('.progress-box').fadeOut();
	});
	uploader2.on('all', function (type) {
        if (type === 'startUpload') {
            state = 'uploading';
        } else if (type === 'stopUpload') {
            state = 'paused';
        } else if (type === 'uploadFinished') {
            state = 'done';
        }
        if (state === 'uploading') {
            $btn.text('暂停上传');
        } else {
            $btn.text('开始上传');
        }
    });

    $btn2.on('click', function () {
        if (state === 'uploading') {
            uploader2.stop();
        } else {
            uploader2.upload();
        }
    });

});

</script>
</body>
</html>

